First Android App

Introduction

To begin with, I will try to create just a dummy placeholder app. In this I will put in different sections corresponding to dimensions recognised in my organisation notes. At a later stage I will try to build useful functionality into each section.

Instructions

The documentation for android app development seems quite comprehensive and useful. In any case, as a starting point, we shall use the official documentation: build your first app .

Step 1 (Install Android Studio)

1. Download the latest version of android studio: official download .
2. Open the .dmg file from the downloads folder.
3. Drag the "Android Studio" icon into the "Applications" folder.
4. Eject the drive created by the .dmg on the desktop and delete the .dmg file.
5. Open "Android Studio" from the "Applications" folder. Do not import settings, if asked on prompt.
6. Select standard install type, dracula UI theme, verifying settings, agree to the license agreement and finish.

Step 2 (Create a Project)

1. Click on "New Project".
2. Under "Phone and Tablet" select "Empty Activity".
3. Name the app as you choose. The package name should automatically change in accordance.
4. Select a location of your choice, or leave the default.
5. Select "Kotlin" as the language.
6. Under minimum SDK select an android version which is old enough to cover a large number of devices.
7. Click "Finish".

Step 3 (Setup Phone for Debugging)

1. In the bottom right background tasks will run. Wait for them to complete.
2. Understand the basic purpose that each of "MainActivity.kt", "activity_main.xml", "AndroidManifest.xml" and "build.gradle" files serve.
3. Sign in to your google account at the top right of the Android Studio and provide the appropriate permissions.
4. Connect your android device to the laptop via USB.
5. On the phone go to "Settings->System(might not be neede)->About Phone". Tap "Build Number" 7 times and then enter the phone pin.
6. Now go to "Settings->System->Developer options->USB debugging(enable & always allow)".
7. From the toolbar on top select the app and phone. Click on the run button.
8. The app will now run on the phone.
9. The app can also be run on an Android Virtual Device, without being connected to the phone, for faster testing.

Step 4 (Viewing Layouts in xml)

1. Understand how layout and widget (ViewGroup and View) objects work.
2. Open "activity_main.xml".
3. If your editor shows the XML source, click the "design" tab at the top right of the window.
4. Click "select design surface" and select "blueprint".
5. Click "view options" in the Layout Editor toolbar and make sure that "show all constraints" is checked.
6. Make sure Autoconnect is off. A tooltip in the toolbar displays "enable autoconnection to parent" when Autoconnect is off.
7. Click "default margins" in the toolbar and select "16". If needed, you can adjust the margins for each view later.
8. Click "device for preview" in the toolbar and select "5.5, 1440 × 2560, 560 dpi (Pixel XL)".

Step 5 (Customise View Objects)

1. Click "TextView" in the component tree and then click the "delete" button.
2. From the palette, click on "Text->Plain Text" and then drag onto the design editor.
3. The square corners of the view can be used to resize the view. The view object's position can be directly dragged and dropped. The circular edges can be dragged till other object's edges to define the constraints in terms of distance between view objects.
4. Add a button from the palette and move around as required.
5. Click "select design surface" and select "design".
6. Open "app->src->main->res->values->string.xml".
7. Click on "Open editor" and then add a key ("edit_message") with a default value of "Enter a message". Similarly add another key of "button_send" with a default value of "Send".
8. In "activity_main.xml" select each of the views, and under "Attributes" select "text" and delete the value. From the "pick a resource" button beside text, click and select the appropriate key for each of the plain text and the button.
9. Click on the "Apply Changes and Restart Activity" button and preview the app.

Step 6 (Functions and Activities)

1. Add the following code to the "MainActivity.kt" file inside the "MainActivity" class, at the end.

/** Called when the user taps the Send button */
fun sendMessage(view: View) {
	val editText = findViewById<EditText>(R.id.editTextTextPersonName)
	val message = editText.text.toString()
	val intent = Intent(this, DisplayMessageActivity::class.java).apply {
		putExtra(EXTRA_MESSAGE, message)
	}
	startActivity(intent)
}

2. Click on "View", click "option+return" (Alt+Enter on windows) and then click on "Import". This will import a few classes and fix the error. Similarly click on all other text appearing in red as an error and click on "option+return" and then import. Do not do this for "DisplayMessageActivity", as we will fix this error in a later step.
3. In "activity_main.xml" select the button. Under "Attributes->Common Attributes", select "onClick" and select "sendMessage" under "MainActivity".
4. In the project window, right-click the app folder and select "New->Activity->Empty Activity". In the "Configure Activity" window, enter "DisplayMessageActivity" for "Activity Name". Leave all other properties set to their defaults and click Finish.
5. In "activity_display_message.xml" add a textView object anywhere and change the size as required.
6. Inside "DisplayMessageActivity.kt" add the following code inside the "onCreate" function.

// Get the Intent that started this activity and extract the string
val message = intent.getStringExtra(EXTRA_MESSAGE)

// Capture the layout's TextView and set the string as its text
val textView = findViewById<TextView>(R.id.textView).apply {
	text = message
}

7. Using "option+return" and importing the red text should now resolve errors inside both "DisplayMessageActivity.kt" and in "MainActivity.kt".
8. In "AndroidManifest.xml" replace the <activity> tag for "DisplayMessageActivity" with the following tag/code. This will create the option of going back from message display to the main activty.

<activity android:name=".DisplayMessageActivity"
	android:parentActivityName=".MainActivity">
	<!-- The meta-data tag is required if you support API level 15 and lower -->
	<meta-data
		android:name="android.support.PARENT_ACTIVITY"
		android:value=".MainActivity" />  
</activity>

9. Click on the "Apply Changes and Restart Activity" button and preview the app.